import React, { Component } from 'react';
import { inject, observer } from 'mobx-react';
import {
  WeaErrorPage,
  WeaTools,
  WeaReqTop,
  WeaLocaleProvider,
  WeaAlertPage,
} from 'ecCom';
import { Button, Spin } from 'antd';

const getLabel = WeaLocaleProvider.getLabel;
const { tryCatch, viewer } = WeaTools;

@tryCatch(
  React,
  props => (
    <WeaErrorPage
      ecId={`${
        (this && this.props && this.props.ecId) || ''
      }_WeaErrorPage@15dyk5`}
      msg={
        props.error ||
        getLabel(186, '对不起，该页面异常，请联系管理员！', 'error')
      }
    />
  ),
  { error: '' },
)
@inject('filePreviewStore')
@observer
class FilePreview extends Component {
  constructor(props) {
    super(props);
    this.prefixCls = 'email-filepreview';
  }

  componentWillMount() {
    const {
      filePreviewStore: { getFileInfo },
      location: { query },
    } = this.props;
    let id = query.fileid || '';
    getFileInfo({ id });
  }

  componentWillReceiveProps(nextProps) {
    const {
      location: {
        query: { fileid: _id },
      },
      filePreviewStore: { getFileInfo },
    } = this.props;
    const {
      location: {
        query: { fileid: _idn },
      },
    } = nextProps;
    if (_id !== _idn) getFileInfo({ id: _idn });
  }

  componentWillUnmount() {
    const { filePreviewStore } = this.props;
    filePreviewStore.clear();
  }

  // 无权限查看页面
  renderNoRight = () => (
    <div className={this.prefixCls}>
      <div className={`${this.prefixCls}-noRight`}>
        <WeaAlertPage
          ecId={`${
            (this && this.props && this.props.ecId) || ''
          }_WeaAlertPage@0lgzvb`}
        >
          <div className={`${this.prefixCls}-noRight-msg`}>
            您当前不具备查看该文档的权限
          </div>
        </WeaAlertPage>
      </div>
    </div>
  );

  // 无预览权限页面
  renderNoPreviewRight = () => (
    <div className={this.prefixCls}>
      <div className={`${this.prefixCls}-noRight`}>
        <WeaAlertPage
          ecId={`${
            (this && this.props && this.props.ecId) || ''
          }_WeaAlertPage@5hmszh`}
        >
          <div className={`${this.prefixCls}-noRight-msg`}>
            {getLabel(520705, '禁止附件预览')}
          </div>
        </WeaAlertPage>
      </div>
    </div>
  );

  renderContent = () => {
    const { filePreviewStore } = this.props;
    const {
      contentLoading,
      contentMsg,
      previewUrl,
      fileIsImg,
      fileId,
      filePath,
    } = filePreviewStore;
    if (fileIsImg) {
      return (
        <div className={`${this.prefixCls}-content-image`}>
          {/* eslint-disable */}
          <img
            data-imgsrc={previewUrl}
            ref={fileId}
            src={previewUrl}
            className="formImgPlay"
            onClick={viewer}
          />
          {/* eslint-enable */}
        </div>
      );
    }
    if (contentLoading) {
      return (
        <Spin
          ecId={`${(this && this.props && this.props.ecId) || ''}_Spin@wc6id2`}
        />
      );
    } else if (filePath === '') {
      return (
        <div className={`${this.prefixCls}-content-waring`}>
          <span>{contentMsg}</span>
        </div>
      );
    }
    return (
      <div className={`${this.prefixCls}-content-file`}>
        <iframe
          className="emailFile-iframe"
          src={filePath}
          title="emailFile-iframe"
        />
      </div>
    );
  };

  render() {
    const { filePreviewStore } = this.props;
    const {
      fileLoading,
      fileRight,
      fileName,
      fileDownload,
      fileMsg,
      filePreviewRight,
    } = filePreviewStore;
    const buttons = [
      <Button
        ecId={`${
          (this && this.props && this.props.ecId) || ''
        }_Button@xyt29q@filepreviewdownload`}
        className={`${this.prefixCls}-downloadBtn`}
        type="primary"
        onClick={() => window.open(fileDownload)}
      >
        {getLabel(31156, '下载')}
      </Button>,
    ];
    if (fileLoading) {
      return (
        <div className={this.prefixCls}>
          <Spin
            ecId={`${
              (this && this.props && this.props.ecId) || ''
            }_Spin@blp9po`}
            size="large"
          />
        </div>
      );
    } else if (!filePreviewRight) {
      return this.renderNoPreviewRight();
    } else if (!fileRight) {
      return this.renderNoRight();
    } else if (fileMsg !== '') {
      return (
        <div className={this.prefixCls}>
          <div className={`${this.prefixCls}-content-waring`}>
            <span>{fileMsg}</span>
          </div>
        </div>
      );
    }
    return (
      <div className={this.prefixCls}>
        <WeaReqTop
          ecId={`${
            (this && this.props && this.props.ecId) || ''
          }_WeaReqTop@ap8hdl`}
          icon={<i className="icon-coms-doc" />}
          iconBgcolor="#df583a"
          title={
            `${getLabel(156, '附件')}: ${fileName}` ||
            getLabel(130030, '文档标题')
          }
          buttons={buttons}
        >
          <div className={`${this.prefixCls}-content`}>
            <div className={`${this.prefixCls}-content-container`}>
              {this.renderContent()}
            </div>
          </div>
        </WeaReqTop>
      </div>
    );
  }
}

export default FilePreview;
